<template>
    <div>
        <el-card style="width: 100%;">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" :rules="rules">
                <div class="container" style="margin-top:20px">
                    <h3 style="margin-bottom: 20px">企业销售品种({{ ruleForm.name }})</h3>
                    <el-row class="demo-ruleForm1" v-for="(item, index) in muban" :key="index">
                        <el-col :span="5">
                            <el-form-item label="品种名称：">
                                <el-input v-model="muban[index].type" style="width:260px"></el-input>
                            </el-form-item>
                            <el-form-item label="当前报价：">
                                <el-input v-model="muban[index].price" style="width:260px"></el-input>
                            </el-form-item>
                            <el-form-item label="上市时间：">
                                <el-date-picker type="date" format="yyyy/MM/dd" value-format="yyyy-MM-dd" placeholder="选择日期"
                                    v-model="muban[index].time" style="width: 260px;"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="16" style="display: flex;">
                            <el-form-item label="品种图片：" style="width: 280px;margin-left: 40px;">
                                <el-upload :show-file-list="false" :action="action" multiple accept="image/jpeg,image/png"
                                    :headers="headers"
                                    :on-success="dynamicPicSuccess.bind(null, { 'index': index })" name="files" :limit="4">
                                    <i class="el-icon-plus avatar-uploader-icon dynamic"></i>
                                </el-upload>
                            </el-form-item>
                            <img class="imgs_up" v-for="(item_s,index) in muban[index].img" :key="index" :src="showImg+item_s" />
                        </el-col>
                        <el-col :span="3">
                           <el-button type="danger" plain @click="deletes(item)">删除</el-button>
                        </el-col>
                    </el-row>
                    <div class="addForm" @click="addForm"><i class="el-icon-plus"></i>添加</div>
                </div>
                <div style="margin-top: 30px;margin-bottom: 10px;">企业图片</div>
                <el-form-item label-width="0">
                    <el-upload list-type="picture-card" :action="action" :show-file-list="false" :headers="headers"
                            :on-success="successFile" name="files">
                            <img v-if="ruleForm.coverImg" :src="showImg + ruleForm.coverImg" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                
                <div style="margin-top: 30px;margin-bottom: 10px;">企业介绍</div>
                <el-form-item label-width="0">
                    <Toolbar style="border: 1px solid #DDDDDD;border-bottom: none;" :editor="editorRef"
                        :defaultConfig="editorConfig.toolbarConfig" :mode="mode" />
                    <Editor style="height: 400px;border-radius: 5px;border: 1px solid #DDDDDD;" v-model="ruleForm.introduce"
                        :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()">确定</el-button>
                    <el-button @click="$router.go(-1)">返回</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import { toolbarConfig, MENU_CONF } from '../compenyContral/wangeditors.js'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { goverment_check,saveComp } from "@/request/supervisionCenterApi.js"
export default {
    components: {
        Editor, Toolbar
    },
    data() {
        return {
            id: '',
            mode: 'default',
            options: [],
            editorRef: null,
            showEdit: true,
            valueHtml: "",
            fileList: [],
            showImg: 'http://grove.cpzsyun.com:81/api/plant/file/show/',
            action: 'http://grove.cpzsyun.com:81/api/plant/file/upload',
            headers: {
                common: {
                    token: JSON.parse(window.sessionStorage.getItem("token"))
                }
            },
            ruleForm: {},
            muban: [
                {
                    type: "",
                    price: "",
                    time: "",
                    img: []
                },
                {
                    type: "",
                    price: "",
                    time: "",
                    img: []
                }
            ],
            rules:{
                type: [
                    { required: true, message: '请输入品种名称', trigger: 'blur' },
                  ],
                price: [
                  { required: true, message: '请输入当前报价', trigger: 'blur' },
                ],
                time: [
                  { required: true, message: '请输入上市时间', trigger: 'blur' },
                ],
                img: [
                   { type: 'array', required: true, message: '请至少上传一张图片', trigger: 'change' }
                ],
            },
            editorConfig: {
                placeholder: '请输入内容...',
                //配置工具栏
                toolbarConfig: toolbarConfig,
                MENU_CONF: MENU_CONF,
            }
        }
    },
    mounted() {
        this.getForm()
    },
    methods: {
        handleCreated(editor) {
            this.editorRef = editor // 记录 editor 实例 
        },
        async getForm() {
            let res = await goverment_check(this.$route.query.id)
            console.log(res)
            this.ruleForm = res.data
            if (res.data.content != null){
                this.muban =JSON.parse(this.ruleForm.content) 
                this.muban.forEach(v=>{
                    v.img = v.img.split(';');
                })
            }else{
                this.ruleForm.coverImg= "",
                this.ruleForm.introduce= ""
            } 
        },
        dynamicPicSuccess(obj, res, file) {
            console.log(obj)
           this.muban[obj.index].img.push(res.data.fileName)
        },
        successFile(res, file){
            this.ruleForm.coverImg = res.data.fileName
        },
       async  submitForm() {
                   let data  = JSON.parse(JSON.stringify(this.muban))
                   data.forEach((v)=>{
                      v.img = v.img.join(';')
                    })
                    this.ruleForm.content = JSON.stringify(data)
                    console.log(this.ruleForm)
                    let res = await saveComp(this.ruleForm)
                    console.log(res)
                    if(res.code!=200)return
                    this.$message.success('更改成功!')
                    this.$router.go(-1)
        },
        addForm() {
            // console.log(this.muban)
            const circle = this.muban[0]; //取出数组中第一个对象
            if (circle) {
                const newObj = {};
                for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj  然后每个属性的值都设置为空；
                    if(key=='img'){
                        newObj[key] = [];
                    }else{
                        newObj[key] = '';
                    }
                   
                }
                this.muban.splice(this.muban.length, 0, newObj);
                console.log(this.muban)
            }
        },
        deletes(index) {
            this.muban.splice(index, 1);
        },
    },
    beforeDestroy() {
        // 组件销毁时，也及时销毁编辑器
        const editor = this.editorRef
        if (editor == null) return
        editor.destroy()
    }
}
</script>

<style>
.w-e-toolbar {
    z-index: 2 !important;
}

.w-e-menu {
    z-index: 2 !important;
}

.w-e-text-container {
    z-index: 1 !important;
}

</style>
<style scoped>
  
.demo-ruleForm1 {
    border: 1px solid #DDDDDD;
    padding-top: 10px;
    margin-bottom: 10px;
}

.addForm {
    width: 100px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin: 0 auto;
    height: 40px;
    background-color: #409EFF;
    line-height: 40px;
    color: #ffffff;
    border: 1px solid #DDDDDD;
    margin-top: -11px;
    cursor: pointer;
    text-align: center;

}

.el-upload--text {
    line-height: 170px;
}
.imgs_up{
    margin-left: 10px;
    width: 180px;
    height: 180px;
}
.avatar {
        width: 147px;
        height: 147px;
    }
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>